<template>
	<DesignHeader @handlePreview="handlePreview"></DesignHeader>
	<div class="design-wrapper">
		<LeftPanel
			ref="leftPanelRef"
			@updateLeftPanel="updateLeftPanel"
			@dragCurrentCpn="dragCurrentCpn"></LeftPanel>
		<div class="wrapper whitewrapper">
			<SketchRule
				ref="sketchruleRef"
				:key="paddingRatioKey"
				v-bind="sketchRuleState.rulerOpts"
				@zoomchange="ruleZoomChange">
				<Render
					v-bind="{
						dragCpn: dragCpnInfo,
					}"></Render>
			</SketchRule>
		</div>
		<RightPanel ref="rightPanelRef"></RightPanel>
	</div>
</template>
<script setup>
import DesignHeader from "./components/DesignHeader/DesignHeader.vue";
import LeftPanel from "./components/LeftPanel/LeftPanel.vue";
import RightPanel from "./components/RightPanel/RightPanel.vue";
import Render from "./components/Render/Render.vue";
import { computed, ref, reactive, onMounted } from "vue";
import { useSketchRuleStore } from "@/stores/sketchRule";
import { storeToRefs } from "pinia";
import { cloneDeep } from "lodash";
import { useRouter } from "vue-router";
const router = useRouter()
const sketchRuleStore = useSketchRuleStore();
const { sketchRuleState } = storeToRefs(sketchRuleStore);
const rightPanelRef = ref() // 右侧面板的dom
const leftPanelRef = ref(); // 左侧面板的dom
const dragCpnInfo = ref({}); // 被拖拽组件的具体信息

// diff算法，paddingRatio发生变化时画布的缩放倍率变化（0-1）
const paddingRatioKey = computed(() => {
	return `padding-${sketchRuleState.value.rulerOpts.paddingRatio}`
})
// 拖拽组件
const dragCurrentCpn = (info) => {
	dragCpnInfo.value = cloneDeep(info);
}
// 计算大屏的实际宽度
const getScreenRealWidth = (w = null) => {
	// 左侧面板的宽度
	let leftWidth = leftPanelRef.value.innerPlane.offsetWidth;
	let rightWidth = rightPanelRef.value.innerPlane.offsetWidth
	if (w) leftWidth = w;
	sketchRuleState.value.rulerOpts.width = window.innerWidth - leftWidth - rightWidth;
	sketchRuleState.value.rulerOpts.height = window.innerHeight;
};
// 缩放事件 - 这个回调函数在ruler组件一开始渲染完成时就触发
const ruleZoomChange = (info) => {
	//获取画布中组件的实际缩放(防止鼠标拖拽时放生偏移)
	sketchRuleState.value.canvasOpts.canvasSacle = info.scale;
};
// 左侧面板折叠时重新计算大屏的实际宽度
const updateLeftPanel = (w) => {
	getScreenRealWidth(w);
};
// 点击预览
const handlePreview = () => {
	console.log('onFullScreen');
	router.push('/preview')
}
onMounted(() => {
	getScreenRealWidth();
});
</script>

<style lang="scss" scoped>
.design-wrapper {
	width: 100vw;
	height: 100vh;
	display: flex;
	.wrapper {
		flex: 1;
		background-size: 21px 21px, 21px 21px;
		box-sizing: border-box;
	}
	.whitewrapper {
		background-color: #fafafc;
		background-image: linear-gradient(#fafafc 20px, transparent 0),
			linear-gradient(90deg, transparent 20px, #373739 0);
	}
	.blackwrapper {
		background-color: #18181c;
		background-image: linear-gradient(#18181c 20px, transparent 0),
			linear-gradient(90deg, transparent 20px, #86909c 0);
	}
}
</style>
